<template>
	<view class="page" :style="themeColor">
		<view
			class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex RecentlyStudying_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-stretch justify-between RecentlyStudying_fd0_0'>
				<view class='flex flex-wrap align-center RecentlyStudying_fd0_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  RecentlyStudying_fd0_0_c0_c0'>&#xe794;</text>
				</view>
				<view class='flex flex-wrap align-center'>
					<text class='RecentlyStudying_fd0_0_c1_c0'>举报</text>
				</view>
				<view class='flex align-center justify-end RecentlyStudying_fd0_0_c2'>
					
				</view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#6A0002"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<block v-else>
			<view class="title_view">
				<view class="title_icon"></view>
				<view class="title_text">请选择举报类型</view>
			</view>
			<view class="list">
				<view class="list_item" v-for="(v, k) in reportList" :key="k" @tap.stop="changeReson(k, v.title)">
					<view class="item_left">{{v.title}}</view>
					<view class="item_right">
						<image v-if="v.isSelect" :src='STATIC_URL+"35.png"' mode=""></image>
						<!-- <image v-else :src='STATIC_URL+"105.png"' mode=""></image> -->
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="title_view">
				<view class="title_icon"></view>
				<view class="title_text">请填写举报理由</view>
			</view>
			<view class="textarea">
				<textarea v-model="value" placeholder="最多输入300字" maxlength="300"></textarea>
				<text class="num">{{value.length}}/300</text>
			</view>
			
			<view class="title_view">
				<view class="title_icon"></view>
				<view class="title_text">请上传图片</view>
			</view>
			<view class="">
				<view class='flex flex-direction flex-wrap align-stretch'>
					<benben-images-upload ref="benbenImagesUploadfd1_3_c1_c0" :img-list.sync="imgList"
						:img-ids.sync="imgIds" :is-show-tips='true' :maxlength="6">
						<template #content="{ num, maxlength, isShow, imgList }">
							<view class="flex flex-wrap align-start flex iNeedFeedback_fd1_3_c1_c0">
				
								<view v-for="(image, index) in imgList" :key="index"
									class='flex position-relative iNeedFeedback_fd1_3_c1_c00'>
									<text class='fu-iconfont2 position-absolute iNeedFeedback_fd1_3_c1_c000'
										@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.delImage(index)">&#xE8E7;</text>
									<image class='iNeedFeedback_fd1_3_c1_c001'
										@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.previewImage(index)"
										mode="aspectFill" :src='image'>
									</image>
								</view>
				
								<image class='iNeedFeedback_fd1_3_c1_c01'
									@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.manyChooseImage()" v-if="isShow"
									mode="aspectFill" :src='STATIC_URL+"48.jpg"'></image>
								<text
									class='image_upload_tips iNeedFeedback_fd1_3_c1_c02'>最多上传{{num}}/{{maxlength}}张图片</text>
							</view>
						</template>
					</benben-images-upload>
				</view>
			</view>
			<view class="submit_btn" @tap.stop="submitReport">提交</view>
		</block>
		
		<view :style="{height: '136rpx'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				value: "",
				report_type: 2,  // 举报类型1发现  2评论
				reportList: [],
				report_type_name: "",
				report_type_id: "",
				id: "",  // 举报数据id（发现id/评论id）
				title: "", 
				comment_content: "",  // 被举报的评论内容
				imgList: [],
				imgIds: '',
			}
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
		
		},
		onLoad(options) {
			let { id, report_type } = options;
			if (id !== undefined) this.id = id;
			if (report_type !== undefined) this.report_type = report_type;
			this.getreportInfo();
		},
		methods: {
			getreportInfo() {
				this.$api.post(global.apiUrls.post652d008223dc2, {
					
				}).then(res => {
					console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.reportList = res.data.data;
						if (this.reportList.length > 0) {
							this.reportList.forEach((v, k) => {
								v.isSelect = false;
							})
							this.reportList[0].isSelect = true;
							this.report_type_name = this.reportList[0].title;
							this.report_type_id = this.reportList[0].id;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			changeReson(index, report_type_name) {
				this.reportList.forEach((v, k) => {
					v.isSelect = false;
				})
				this.reportList[index].isSelect = true;
				this.report_type_name = report_type_name;
				this.report_type_id = this.reportList[index].id;
				this.$forceUpdate();
			},
			// 提交举报  post64e314f975f20
			submitReport() {
				if (!this.report_type_name) {
					this.$message.info('请选择举报类型');
					return;
				}
				if (!this.value) {
					this.$message.info('请填写举报理由');
					return;
				}
				this.$api.post(global.apiUrls.post652d00ae1349f, {
					report_id: this.report_type_id,/*  */
					data_type: this.report_type,
					data_id: this.id,
					body: this.value,
					thumb: this.imgList.length > 0 ? this.imgList.join(',') : ""
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.title_view {
		padding: 32rpx 32rpx 0;
		display: flex;
		align-items: center;
		.title_icon {
			width: 6rpx;
			height: 28rpx;
			background: #6A0002;
			border-radius: 10rpx;
		}
		.title_text {
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 12rpx;
		}
	}
	.list {
		padding: 0 32rpx 0 50rpx;
		.list_item {
			padding: 32rpx 0 24rpx 0;
			border-bottom: 1rpx solid #eee;
			display: flex;
			align-items: center;
			.item_left {
				width: calc(100% - 36rpx);
				padding-right: 24rpx;
			}
			.item_right {
				width: 32rpx;
				height: 24rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.line {
		height: 16rpx;
		background: #f6f7f9;
	}
	.textarea {
		margin-top: 24rpx;
		padding: 0 32rpx;
		position: relative;
		textarea {
			width: 100%;
			height: 280rpx;
			background: #f6f7f9;
			padding: 32rpx 24rpx 50rpx;
			font-size: 28rpx;
			border-radius: 16rpx;
		}
		.num {
			font-size: 22rpx;
			color: #999999;
			position: absolute;
			right: 48rpx;
			bottom: 16rpx;
		}
	}
	.submit_btn {
		width: 686rpx;
		height: 88rpx;
		background: #6A0002;
		opacity: 1;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		bottom: 48rpx;
		left: 32rpx;
		z-index: 10;
	}
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background-size: 100% auto !important;
		background: #fff;
	}
	
	.RecentlyStudying_flex_0 {
		background-size: 100% !important;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: #fff;
	}
	
	.RecentlyStudying_fd0_0_c2 {
		padding: 0rpx 0rpx 0rpx 0rpx;
		width: 150rpx;
	}
	
	.RecentlyStudying_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 50rpx;
		color: #333333;
	}
	
	.RecentlyStudying_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
	}
	
	.RecentlyStudying_fd0_0_c0 {
		width: 150rpx;
	}
	
	.RecentlyStudying_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}
	
	.iNeedFeedback_fd1_3_c1_c02 {
		font-size: 24rpx;
		color: rgba(191, 191, 191, 1);
		font-weight: 400;
		width: 100%;
	}
	
	.iNeedFeedback_fd1_3_c1_c01 {
		width: 160rpx;
		height: 160rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	
	.iNeedFeedback_fd1_3_c1_c001 {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	
	.iNeedFeedback_fd1_3_c1_c000 {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}
	
	.iNeedFeedback_fd1_3_c1_c00 {
		margin: 0rpx 24rpx 24rpx 0rpx;
	}
	
	.iNeedFeedback_fd1_3_c1_c0 {
		padding: 24rpx 0rpx 0rpx 24rpx;
	}
</style>